import { useState, useRef } from 'react'
import { Form, Button, Input, NavBar, } from '@nutui/nutui-react'
import { Tips, ArrowLeft } from '@nutui/icons-react'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
export default function Login_phone() {
  let [phone, setphone] = useState("")
  let [yanzhengma, setyanzhengma] = useState("")
  let yzm = useRef()
  let nav = useNavigate()
  let time = 61
  let hqyzm = async () => {
    let timer = setInterval(() => {
      time -= 1
      yzm.current.innerText = `${time}秒`
      if (time == -1) {
        clearInterval(timer)
        yzm.current.innerText = "获取验证码"
        time = 60
      }
    }, 1000);
  }
  return (
    <div>
      <NavBar
        back={
          <>
            <ArrowLeft />
            返回
          </>
        }
        onBackClick={(e) => nav("/app/login")}
      />
      <div style={{ textAlign: "center" }}>
        <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.VQie14Lx7VZjKuJjCRiBFwHaFR?rs=1&pid=ImgDetMain" alt="" style={{ width: "160px", height: "150px" }} />
      </div>
      <Form
        labelPosition="right"
        footer={
          <>
            <Button nativeType="submit" block type="primary" onClick={async () => {
              let { data: { code } } = await axios.post("http://localhost:3000/login_phone", { phone, yanzhengma })
              console.log(code);

              if (code == 0) {
                alert("登录成功")
                nav("/shou/index")
                localStorage.setItem("userInfo", phone)
              } else {
                alert("用户不存在")
              }

            }}>
              登录
            </Button>
          </>
        }
      >
        <Form.Item
          align="center"
          required
          name="username"
          rules={[
            { max: 11, message: '手机号不能超过11个字' },
            { required: true, message: '请输入正确手机号' },
            {
              validator: (value) => {
                return value.length > 12
              },
            },
          ]}
        >
          <Input
            className="nut-input-text"
            placeholder="请输入手机号"
            type="text"
            value={phone}
            onChange={(e) => {
              setphone(e)
            }}
          />
        </Form.Item>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            background: '#fff',
            padding: '0 10px',
          }}
        >
          <Tips color="var(--nutui-gray-7)" />
          <Input
            placeholder="请输入短信验证码"
            style={{ '--nutui-input-padding': '10px' }}
            value={yanzhengma}
            onChange={(e) => {
              setyanzhengma(e)
            }}
          />
          <div className="right" >
            <Button type="primary" size="small" onClick={async () => {

              let { data: { code } } = await axios.post("http://localhost:3000/sendSms", { phone })
              console.log(code);

              if (code == 0) {
                hqyzm()
              } else {
                alert("手机格式错误")
              }
            }}>
              <div ref={yzm}>获取验证码</div>
            </Button>
          </div>
        </div>
      </Form>
    </div>
  )
}
